<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>登录</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div style="width: 100%;text-align: center;margin-top:15%">
        <div>
            <h2>登录</h2>
            <div><span class="input-span">账 号</span><input class="input-cls" id="name" type="text"/></div>
            <div><span class="input-span">密 码</span><input class="input-cls" id="password"  type="password"/></div>
            <div><span id="errormessage" style="color: red"></span></div>
            <button class="input-btn" id="denglubutton">登录</button>
        </div>
    </div>
</body>
</html>
<script>
    //点击button按钮处理
    $("#denglubutton").click(function(){
        var name = $("#name").val();
        console.log(name)
        if (name ==null || name === ''){
            $("#errormessage").text("账号不能为空");
            return false
        }
        var password = $("#password").val();
        if (password ==null || password === ''){
            $("#errormessage").text("密码不能为空");
            return false
        }
        $.ajax({
            url: "/user/login",// The URL for the request
            contentType : "application/json",
            data: JSON.stringify({name:name, password: password}),
            type: "POST",// Whether this is a POST or GET request
        }).done(function(res) {
            if (res.code==200){
                location.href = "index"
            } else {
                $("#errormessage").text(res.message);
            }
        });
    })
</script>
<style>
    .input-span {
        font-size: 22px;
    }
    .input-cls {
        line-height: 32px;
        margin-left: 10px;
        font-size: 20px;
        margin-top: 5px;
    }
    .input-btn {
        margin-top: 40px;
        width: 314px;
        font-size: 20px;
        line-height: 32px;
        background-color: #67C23A;
    }
</style>